<template>
  <div class="know_ledge_multiple">
    <el-select
      v-model="knowledgeVal"
      placeholder="请选择知识库类型"
      multiple
      collapse-tags
      collapse-tags-tooltip
      filterable
      remote
      reserve-keyword
      :remote-method="knowledgeTypeSearch"
      :loading="searchLoading"
      clearable
    >
      <el-option v-for="item in typeOptions" :key="item.id" :label="item.name" :value="item.id" />
    </el-select>
  </div>
</template>

<script setup lang="ts" name="knowlegeMultiple">
  import { ref, onMounted, watch } from 'vue'

  // 引用工具或组件
  import { knowledgeTypepageSelect } from '../../api/knowledge'

  // 知识库类型下拉对象
  interface KnowledgeTypeOption {
    id: any
    name: string
  }

  // 知识库类型关联对象
  interface KnowledgeTypeVo {
    id: any
    knowledgeTypeId: any
  }

  // 接收父组件参数
  const props = defineProps({
    oldKnowledgeTypeVo: Array<KnowledgeTypeVo>,
  })

  const typeOptions = ref<KnowledgeTypeOption[]>([])
  const knowledgeVal = ref([]) // 知识库选中的数组值
  const queryName = ref()
  const searchLoading = ref(false) // 搜索加载动画
  const knowledgeTypeVo = ref<KnowledgeTypeVo[]>([])
  const delRelationIds = ref([]) // 删除的关联对象ID

  // 值回显处理方法
  const handlerShowValue = () => {
    knowledgeVal.value = []
    props.oldKnowledgeTypeVo.forEach((item) => {
      knowledgeVal.value.push(item.knowledgeTypeId)
    })
  }

  // 处理选中的值
  const getKnowledgeSelectVal = () => {
    knowledgeTypeVo.value = []
    if (knowledgeVal.value) {
      knowledgeVal.value.forEach((item) => {
        knowledgeTypeVo.value.push({
          id: '',
          knowledgeTypeId: item,
        })
      })
    }
    if (props.oldKnowledgeTypeVo) {
      knowledgeTypeVo.value.forEach((item) => {
        let id = props.oldKnowledgeTypeVo.filter(
          (f) => f.knowledgeTypeId == item.knowledgeTypeId,
        )[0]?.id
        if (id) {
          item.id = id
        }
      })
    }
    return knowledgeTypeVo
  }

  // 处理删除的值
  const getDeleteKnowledgeSelectVal = () => {
    delRelationIds.value = []
    if (props.oldKnowledgeTypeVo) {
      props.oldKnowledgeTypeVo.forEach((item) => {
        if (knowledgeVal.value.indexOf(item.knowledgeTypeId) === -1) {
          delRelationIds.value.push(item.id)
        }
      })
    }
    return delRelationIds
  }

  // 关键词搜索方法
  const knowledgeTypeSearch = (name: string) => {
    queryName.value = name
  }

  // 请求接口
  const requestKnowledgeTypepageSelectApi = (name: string) => {
    typeOptions.value = []
    knowledgeTypepageSelect({ name: name }).then((resp) => {
      if (resp.data.code == 20000) {
        typeOptions.value = resp.data.data.rows
      }
    })
  }

  onMounted(() => {
    // requestKnowledgeTypepageSelectApi('')
  })

  // 监听搜索关键词的改变
  watch(
    () => queryName.value,
    (newVal, oldVal) => {
      if (!newVal && !oldVal) {
        return
      }
      searchLoading.value = true
      setTimeout(() => {
        requestKnowledgeTypepageSelectApi(newVal)
        searchLoading.value = false
      }, 500)
    },
  )

  // 监听父组件传值
  watch(
    () => props.oldKnowledgeTypeVo,
    () => {
      handlerShowValue()
    },
  )

  defineExpose({
    getKnowledgeSelectVal,
    getDeleteKnowledgeSelectVal,
  })
</script>

<style scoped lang="scss">
  .know_ledge_multiple {
    max-height: 28px;
    width: 100%;
    display: flex;
    align-items: center;
  }
</style>
